<template>
	<view class="box">
		<view class="title">
			<view class="">
				<text class="title-name">{{curMenu.name}}</text>
				<text class="title-type">规格</text>
				<text v-if='type==1'>{{dataView.specification}}*1000</text>
				<text v-else>{{dataView.specification}}*1200</text>
			</view>
			<view class="title-price">¥{{type==1?dataView.price1:dataView.price2}}</view>
		</view>
		<view class="head">
			<view class="head-col" :style="headStyle(item)" v-for="(item,index) in headColumns" :key="index">
				<view v-if="item.props==='sel'" class="selCla" @click="toggleRadio(1,1)">
					<van-radio-group v-model:value="radio">
						<van-radio :name="1" shape="square"></van-radio>
					</van-radio-group>
				</view>
				<text v-else>
					{{item.name}}
				</text>
			</view>
		</view>
		<scroll-view scroll-x scroll-y enable-flex
			style="width: 100%;height: calc(100vh - 145px);box-sizing: border-box;overflow:auto;"
			@scrolltolower="onScrollToLower" lower-threshold="50">
			<view v-if="list.length>0" class="main">
				<view class="main-row" v-for="(j,jIndex) in list" :key="jIndex">
					<view class="main-row-col" :style="headStyle(item,index)" v-for="(item,index) in headColumns"
						:key="index">
						<text v-if="item.props==='specification'">
							{{dataView.specification}}
						</text>
						<view v-else-if="item.props==='sel'" class="selCla" @click="toggleRadio(j,2)">
							<van-radio-group v-model:value="j.isSel">
								<van-radio :name="1" shape="square"></van-radio>
							</van-radio-group>
						</view>
						<view v-else-if="item.props==='phone'" class="callPhone"  @click="callPhone(j)">
							<van-icon name="phone-o" size="20" color="#0749e4" />
						</view>
						<text v-else>
							{{j[item.props]===null||j[item.props]===''?'-':j[item.props]}}
						</text>
					</view>
				</view>
				<view v-if="loading" class="loading">加载中...</view>
				<view v-if="page.pageIndex>=totalPages-1" class="loading">没有更多数据了</view>
			</view>
			<view v-else-if="!loading&&list.length==0" class="empty">
				<van-empty description="暂无库存" />
			</view>
		</scroll-view>
		<view class="bot">
			<van-button class="botBtn" round :disabled="list.length==0" type="info" size="large"
				@click="generateOrder">生成订单</van-button>
		</view>
	</view>
	<float-drag></float-drag>
</template>

<script>
	import toolMarket from './util.js'
	import tool from "../../utils/common.js"
	import {
		getQuoteStock,
		postOrderGenerate
	} from '@/common/api.js'
	import FloatDrag from '../../components/float-drag.vue'
	export default {
		name: 'priceDetail',
		components: {
			'float-drag': FloatDrag
		},
		data() {
			return {
				type: null,
				dataView: {},
				curMenu: {},
				list: [],
				headColumns: [],
				page: {
					pageIndex: 0,
					pageSize: 20
				},
				totalPages: 0,
				loading: false,
				radio: null
			}
		},
		computed: {
			colWidthTotal() {
				let arr = this.headColumns.map(i => +i.minWidth)
				let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
				return sum
			}
		},
		onLoad(option) {
			this.type = option.type
			this.dataView = JSON.parse(option.priceDetail)
			this.curMenu = JSON.parse(option.curMenu)
			console.log(this.dataView)
			console.log(this.curMenu)
			this.headColumns = toolMarket.priceHeadColumns
			this.getList()
		},
		methods: {
			headStyle(val, index) {
				let obj = {
					'min-width': `${val.minWidth}px`,
					'width': `${(val.minWidth*100)/this.colWidthTotal}%`,
					'text-align': `${val.align?val.align:'left'}`,
					'color': `${val.color?val.color:'#000'}`
				}
				return obj
			},
			toggleRadio(name, key) {
				if (key == 1) {
					if (this.radio === name) {
						// 如果已经选中，则取消选中
						this.radio = null;
						this.list.map(i => i.isSel = null)
						console.log('radio', this.radio)
					} else {
						// 否则选中
						this.radio = name;
						this.list.map(i => i.isSel = 1)
						console.log('radio2', this.radio)
					}
				} else if (key == 2) {
					console.log('name', name)
					if (name.isSel == 1) {
						// 如果已经选中，则取消选中
						name.isSel = null;
					} else {
						// 否则选中
						name.isSel = 1;
					}
					let index = this.list.findIndex(i => i.isSel != 1)
					if (index > -1) {
						this.radio = null
					} else {
						this.radio = 1
					}
				}
			},
			// 获取列表数据
			async getList() {
				this.loading = true
				let params = {
					menuId: this.curMenu.id,
					spceId: this.dataView.id,
					pageIndex: this.page.pageIndex,
					pageSize: this.page.pageSize,
					meter: this.type == 1 ? 1000 : 1200
				}
				const res = await getQuoteStock(params)
				console.log(res)
				if (res.data) {
					this.list.push(...res.data)
				}
				this.totalPages = res.totalPages
				this.loading = false
			},
			onScrollToLower(event) {
				if (event.detail.direction === 'bottom' && this.list.length > 0 && !this.loading) {
					if (this.page.pageIndex >= this.totalPages - 1) return
					this.page.pageIndex++
					this.getList()
				}
			},
			callPhone(row){
				console.log(row)
				tool.callPhone(row.userPhone)
			},
			async generateOrder() {
				if (this.list.length == 0) return
				// 用户点击了确认按钮，执行确认回调
				let isSelList = this.list.filter(i => i.isSel == 1)
				if (isSelList.length == 0) {
					return uni.showToast({
						title: '请选择库存',
						icon: 'none',
					})
				}
				const stockIds = isSelList.map(i => i.id)
				console.log('生成订单', stockIds)
				const params = {
					stockIds: stockIds
				}
				const res = await postOrderGenerate(params)
				console.log('生成订单', res)
				if (res.code == 0) {
					const orderId = res.data
					uni.showToast({
						title: '生成订单成功',
						icon: 'none',
					})
					uni.navigateTo({
						url: `../market/confirmOrder?orderId=${orderId}`
					})
				} else if (res.code == 1001) {
					uni.showModal({
						title: '提示',
						content: `${res.message}`,
						success: (res) => {
							if (res.confirm) {
								// 跳转路由
								uni.navigateTo({
									url: `../market/mineOrder`
								});
							} else if (res.cancel) {
								console.log('用户点击了取消');
							}

						}
					});
				} else {
					uni.showToast({
						title: '生成订单失败' + res.message,
						icon: 'none',
					})
				}
				// uni.showModal({
				// 	title: '提示',
				// 	content: '是否确认生成订单？',
				// 	success: async (res) => {
				// 		if (res.confirm) {
				// 			// 用户点击了确认按钮，执行确认回调
				// 			let isSelList = this.list.filter(i=>i.isSel==1)
				// 			const stockIds = isSelList.map(i=>i.id)
				// 			console.log('生成订单',stockIds)
				// 			const params = {
				// 				stockIds:stockIds
				// 			}
				// 			const res = await postOrderGenerate(params)
				// 			console.log(res)
				// 			if(res.code!=-1){
				// 				const orderId = res.data
				// 				uni.showToast({
				// 					title: '生成订单成功',
				// 					icon: 'none',
				// 				})
				// 				uni.navigateTo({
				// 					url:`../market/confirmOrder?orderId=${orderId}`
				// 				})
				// 			}else{
				// 				uni.showToast({
				// 					title: '生成订单失败'+res.message,
				// 					icon: 'none',
				// 				})
				// 			}
				// 		} else if (res.cancel) {
				// 			console.log('用户点击了取消');
				// 		}

				// 	}
				// });

			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		padding: 0 10px 60px;
		box-sizing: border-box;

		.title {
			width: 100%;
			padding: 0 15px;
			height: 35px;
			line-height: 35px;
			border-radius: 3px;
			box-sizing: border-box;
			background-color: #ececec;
			font-size: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-name {
				color: #0749e4;
				margin-right: 20px;
				font-weight: 600;
			}

			&-type {
				margin-right: 5px;
			}

			&-price {
				font-size: 18px;
				color: #0749e4;
				font-weight: 600;
			}
		}

		.head {
			width: 100%;
			overflow-y: auto;
			font-size: 15px;
			display: flex;
			align-content: center;
			flex-wrap: nowrap;
			margin-top: 15px;
			border-radius: 4px;

			&-col {
				height: 35px;
				line-height: 35px;
				background-color: #ececec;


			}
		}

		.main {
			font-size: 15px;
			// padding-top: 45px;

			&-row {
				display: flex;
				align-content: center;
				flex-wrap: nowrap;
				box-sizing: border-box;

				&-col {
					height: 45px;
					line-height: 45px;
					position: relative;
					box-sizing: border-box;
					border-top: 1px solid #ececec;

					.sec-props {
						font-size: 12px;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
					}
				}
			}

			.loading {
				height: 45px;
				line-height: 45px;
				width: 100%;
				text-align: center;
				color: #a8a8a8;
			}
		}

		.empty {
			padding-top: 45px;
			box-sizing: border-box;
			height: calc(100vh - 145px);
			text-align: center;
			color: #a8a8a8;
			font-size: 14px;
		}

		.selCla {
			width: 100%;
			height: 35px;
			display: flex;
			align-items: center;
			margin-left: 8px;
		}

		.bot {
			width: 100%;
			height: 60px;
			position: fixed;
			margin: 0 auto;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
		}

		.botBtn {
			width: 90%;
			height: 45px;
			line-height: 45px;
			// text-align: center;
			// border-radius: 25px;
			// background-color: #0749e4;
			// color: #fff;
		}
	}
</style>